<template>
  <div id="mapContainer">
    <div id="myContainer"></div>
    <!-- <div ref="panel" id="panel"></div> -->
  </div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader';

export default {
  props: {
    startAgency: {
      type: String,
      required: true
    },
    endAgency: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      // map: null,
    }
  },
  mounted() {
    window._AMapSecurityConfig = {
      securityJsCode: '20e0ce57b2dfb1a4ecaf1c459b8745f0',
    }
    this.initMap()
  },
  methods: {
    initMap() {
      AMapLoader.load({
        key: "2db67e5fefb9542d29fa671a9feb55ea",             // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0",      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ['AMap.Driving'],       // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      }).then(AMap => {

        this.map = new AMap.Map("myContainer", {  //设置地图容器id
          // viewMode: "3D",    //是否为3D地图模式
          // resizeEnable: true,
          center: [116.397428, 39.90923],//地图中心点
          zoom: 13 //地图显示的缩放级别
        });

        AMap.plugin(['AMap.ToolBar', 'AMap.Scale'], () => {//异步加载插件
          var toolbar = new AMap.ToolBar();
          this.map.addControl(toolbar);
        });

        var driver = new AMap.Driving({
          map: this.map,
        })
        // 根据起终点名称规划驾车导航路线
        driver.search([
          {keyword: this.startAgency, city: '长沙'},
          {keyword: this.endAgency, city: '长沙'}
        ], (status, result) => {
          // result 即是对应的驾车导航信息，相关数据结构文档请参考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
          status === 'complete' ? this.$message.success('绘制驾车路线完成') : this.$message.error('获取驾车数据失败' + result)
        });
      }).catch(e => {
        console.log(e);
      })
    },


  }
}
</script>

<style scoped>
#myContainer {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 600px;
}

#panel {
  position: absolute;
  background-color: white;
  max-height: 60%;
  overflow-y: auto;
  top: 79px;
  right: 10px;
  width: 250px;
}

#panel .amap-call {
  background-color: #009cf9;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

#panel .amap-lib-driving {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  overflow: hidden;
}
</style>
